<template>
  <div class="app-pro-basicLayout-content-wrap">
    <div class="app-pro-pages-content">
      <div class="app-pro-table-search">
        <el-form :inline="true" :model="formInline" ref="formInline" label-width="80px" size="small" class="form-flex-item">
          <el-row :gutter="20">
            <el-col :xs="12" :sm="10" :md="8" :lg="6">
              <el-form-item :label="'검색'|language" prop="title">
                <el-input v-model="formInline.title" :placeholder="'검색어: 서비스 이름'|language" @keyup.enter.native="handleSearch"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6">
              <el-form-item>
                <el-button type="primary" size="small" @click="handleSearch">{{'검색'| language}}</el-button>
                <el-button size="small" @click="resetForm('formInline')">{{'초기화'| language}}</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="app-pro-pages-table">
        <div class="main-card">
          <div class="main-table-toolbar">
            <div class="main-table-toolbar-title">
              <div class="main-table-toolbar-title-only">서비스관리</div>
            </div>
            <div class="main-table-toolbar-option">
              <!-- <el-button type="primary" size="mini" icon="el-icon-plus" style="margin-right:5px" @click="confirmAddPrice">{{'추가'| language}}</el-button> -->
              <!--
              <el-divider direction="vertical"></el-divider> -->
              <el-link :underline="false" class="main-table-toolbar-item-icon">
                <el-tooltip class="item" effect="dark" :content="'다운로드'| language" placement="top">
                  <i @click="downloadFile('/api/price/index', '서비스관리')"  class="el-icon-download"></i>
                </el-tooltip>
              </el-link>
              <!-- <el-link :underline="false" class="main-table-toolbar-item-icon">
                <el-tooltip class="item" effect="dark" :content="'초기화'| language" placement="top">
                  <i @click="getPriceList()" class="el-icon-refresh-right"></i>
                </el-tooltip>
              </el-link> -->
            </div>
          </div>
          <div class="main-table-wrapper" style="padding: 0">
            <my-table
              :columns="columns"
              :data="data"
              :loading="loading"
              :pagination="pagination"
              :showIndex="true"
              :showSelection="true"
              :cellStyle="{padding: '6px 0'}"
              :headerCellStyle="{background:'rgba(247, 133, 2, 1)',color:'#fff'}"
              @emitSelection="emitSelection"
              @currentChange="currentChange"
              @sortChange="sortChange">
              <template v-slot:operation="slotProps">
                <el-button
                  v-if="!slotProps.callback.row.deleted_at"
                  @click.native.prevent="handleEdit(slotProps.callback.row)"
                  type="text">
                  {{'수정'| language}}
                </el-button>
                <!-- <el-divider direction="vertical"></el-divider> -->
                <!-- <el-popconfirm
                  title="삭제하시겠습니까"
                  @onConfirm="handleDeletePrice(slotProps.callback.row.id)"
                  :confirmButtonText="'확인'|language"
                  :cancelButtonText="'취소'|language"
                >
                  <el-button
                    slot="reference"
                    type="text"
                    style="color:#f56c6c">
                    삭제
                  </el-button>
                </el-popconfirm> -->
              </template>
            </my-table>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      :title="dialogForm.title"
      custom-class="dialog-content"
      :visible.sync="dialogForm.dialogVisible"
      :destroy-on-close="true"
      top="5%"
      width="800px">
      <div class="dialog-body-content">
        <form-page
          :ref-obj.sync="formInfo.ref"
          :data="formInfo.data"
          :field-list="formInfo.fieldList"
          :rules="formInfo.rules"
          :label-width="formInfo.labelWidth"
          :list-type-info="listTypeInfo">
        </form-page>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogForm.dialogVisible = false">{{'취소'| language}}</el-button>
        <el-button size="small" type="primary" @click="handleSubmitPrice">{{'확인'| language}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getDictData } from '@/api/app'
import { mergeObjOfValue, deepClone } from '@/utils'
import FormPage from '_c/FormPage'
import myTable from '_c/Table'
import { getResourceEvents, publicEvents } from '@/mixins'
import * as priceApi from '@/api/coaching_order/index'
const formInfoData = {
  id: 0,
  service_type: '',
  original_price: 0,
  price: 0,
  discount: 0,
  title: '',
  value: '',
  describe: ''
}
export default {
  name: 'Price',
  data () {
    return {
      formInline: {
        title: ''
      },
      columns: [{
        label: '서비스종류',
        prop: 'server_type.value',
        width: 150
      }, {
        label: '서비스이름',
        prop: 'title',
        sortable: true,
        width: 180
      }, {
        label: '원가',
        prop: 'original_price',
        price: true,
        sortable: true,
        width: 100
      }, {
        label: '할인가',
        prop: 'price',
        price: true,
        sortable: true,
        width: 100
      }, {
        label: '할인율',
        prop: 'discount',
        sortable: true,
        width: 100
      }, {
        label: '서비스옵션',
        prop: 'value',
        sortable: true,
        width: 120
      }, {
        label: '서비스설명',
        prop: 'describe',
        sortable: true
      }, {
        label: '관리',
        prop: '',
        width: 120,
        align: 'left',
        slot: 'operation'
      }],
      data: [],
      pagination: {
        currentPage: 1,
        pageSize: 15
      },
      selectionData: [],
      loading: true,
      dialogForm: {
        dialogVisible: false,
        title: '신규등록'
      },
      listTypeInfo: {
        CoachingService: []
      },
      formInfo: {
        ref: null,
        data: formInfoData,
        fieldList: [
          { label: '서비스종류', value: 'service_type', width: '260', type: 'select', className: 'el-form-block', required: true, list: 'CoachingService' },
          { label: '원가', value: 'original_price', type: 'inputNumber', style: { width: '180px' }, className: 'el-form-block', required: true },
          { label: '할인가', value: 'price', type: 'inputNumber', style: { width: '180px' }, className: 'el-form-block', required: true },
          { label: '할인율', value: 'discount', type: 'inputNumber', style: { width: '180px' }, className: 'el-form-block', required: true },
          { label: '서비스이름', value: 'title', type: 'input', className: 'el-form-block', required: true },
          { label: '서비스옵션', value: 'value', type: 'input', className: 'el-form-block', required: true },
          { label: '서비스설명', value: 'describe', width: '260', type: 'textarea', autosize: { minRows: 4, maxRows: 20 }, required: true, className: 'el-form-block' }
        ],
        rules: {},
        labelWidth: '120px'
      },
      sortParams: {}
    }
  },
  components: {
    myTable,
    FormPage
  },
  mixins: [getResourceEvents, publicEvents],
  mounted () {
    this.formInfo.data = deepClone(formInfoData)
    this.getPriceList()
    this.getCoachingService('CoachingService')
    this.initRules()
  },
  methods: {
    initRules () {
      const formInfo = this.formInfo
      formInfo.rules = this.$initRules(formInfo.fieldList)
    },
    getCoachingService (key) {
      getDictData(key).then(res => {
        this.listTypeInfo[key] = res.map(item => {
          return {
            label: item.value,
            value: parseInt(item.idx)
          }
        })
      })
    },
    getPriceList () {
      const data = {
        ...this.formInline,
        ...this.sortParams,
        page: this.pagination.currentPage,
        per: this.pagination.pageSize
      }
      this.loading = true
      priceApi.getPriceList(data).then(res => {
        this.loading = false
        this.data = res.data
        this.pagination.total = res.meta.pagination.total
      })
    },
    sortChange (val) {
      this.pagination.currentPage = 1
      if (val.order === 'ascending') {
        this.sortParams = {
          sort: 'asc',
          order_by: val.prop
        }
      } else if (val.order === 'descending') {
        this.sortParams = {
          sort: 'desc',
          order_by: val.prop
        }
      } else {
        this.sortParams = {}
      }
      this.getPriceList()
    },
    handleDeletePrice (id) {
      priceApi.deletePrice({ id }).then(res => {
        this.getPriceList()
      })
    },
    confirmAddPrice () {
      this.dialogForm.title = '신규등록'
      this.formInfo.data.id = 0
      mergeObjOfValue(this.formInfo.data, formInfoData)
      this.dialogForm.dialogVisible = true
    },
    handleSubmitPrice () {
      if (this.formInfo.data.id === 0) {
        this.formInfo.data.id = null
      }
      this.formInfo.ref.validate((valid) => {
        if (valid) {
          priceApi.savePrice(this.formInfo.data).then(res => {
            this.$message({
              message: '반영이 완료되었습니다.',
              type: 'success'
            })
            this.getPriceList()
            this.dialogForm.dialogVisible = false
          })
        }
      })
    },
    handleEdit (rowData) {
      this.dialogForm.title = '관리'
      this.formInfo.data.id = rowData.id
      mergeObjOfValue(this.formInfo.data, rowData)
      this.dialogForm.dialogVisible = true
      this.lookPrice(rowData.id)
    },
    lookPrice (id) {
      priceApi.detailPrice({ id }).then(res => {
        // this.getPriceList()
      })
    },
    handleSearch () {
      this.pagination.currentPage = 1
      this.getPriceList()
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.getPriceList()
    },
    emitSelection (val) {
      this.selectionData = val
    },
    currentChange (val) {
      this.pagination.currentPage = val
      this.getPriceList()
    }
  }
}
</script>
